<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">
        <span>选择接受评定的人员</span>
      </div>
      <div class="div">
        <span @click="onClickRight" class="side">
              <img src="../../assets/蓝添加.png" alt="" style="width: 13px;height: 13px">
              新增评定
        </span>
<!--        <span class="side" v-else>下一步</span>-->
      </div>
    </header>
    <div class="tabList topSmall" >
<!--      <div class="search personType">-->
<!--        <el-select v-model="perType"-->
<!--                   style="width: 130px;"-->
<!--                   @change="changePer()"-->
<!--                   :class="[perType.length > 0 ? 'select' : 'noselect']"-->
<!--                   placeholder="人员类型">-->
<!--          <el-option-->
<!--            v-for="item in options1"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </div>-->
      <div class="search perName">
        <el-select v-model="perName"
                   style="width: 130px"
                   filterable
                   @volumechange="clickPerName"
                   @focus="clickPerName"
                   remote
                   :remote-method="remoteMethodName"
                   @change="changePer"
                   :class="[perName.length > 0 ? 'select' : 'noselect']"
                   placeholder="人员姓名">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search perPhone">
        <el-select v-model="perPhone"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerPhone"
                   @focus="clickPerPhone"
                   @change="changePer"
                   remote
                   :remote-method="remoteMethodPhone"
                   :class="[perPhone.length > 0 ? 'select' : 'noselect']"
                   placeholder="手机号码">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search perIDcard">
        <el-select v-model="perIDcard"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerIDcard"
                   @focus="clickPerIDcard"
                   @change="changePer"
                   remote
                   :remote-method="remoteMethodIDcard"
                   :class="[perIDcard.length > 0 ? 'select' : 'noselect']"
                   placeholder="身份证号">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search perAddress">
        <el-select v-model="perAddress"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerAddress"
                   @focus="clickPerAddress"
                   remote
                   :remote-method="remoteMethodAddress"
                   :class="[perAddress.length > 0 ? 'select' : 'noselect']"
                   @change="changePer"
                   placeholder="地址">
          <el-option
            style="max-width: 100vw"
            v-for="item in options5"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content"  ref="box">
      <ul v-for="(item, index) in peopleList"
          @click="clickRun(item)"
          :key="index">
        <li class="li_header">
          <div class="li_header_left">
            <img class="photo" v-if="(item.PHOTO === null || item.PHOTO === '' || item.PHOTO === undefined) && item.SEX === 1" src="../../assets/男患者@2x.png" alt="">
            <img class="photo" v-else-if="(item.PHOTO === null || item.PHOTO === '' || item.PHOTO === undefined) && item.SEX === 2" src="../../assets/女患者@2x.png" alt="">
            <img class="photo" v-else-if="item.PHOTO !== null || item.PHOTO !== '' || item.PHOTO !== undefined" :src="item.PHOTO" alt="">
            <span>{{item.name}}</span>
            <a v-show="Number(item.SEX) === 1">男</a>
            <a v-show="Number(item.SEX) === 2">女</a>
            <a v-show="item.age !== null && item.age !== undefined">{{item.age}}岁</a>
            <button class="peoTypeBtn"
                    style="background: #1da4f2"
                    v-show="Number(item.isself)===1">
              本人
            </button>
            <button class="peoTypeBtn"
                    style="background: rgba(46, 196, 155, 1)"
                    v-show="Number(item.issign)===1 && Number(item.isself) !== 1"
                    >
              签约
            </button>
            <button class="peoTypeBtn"
                    style="background: rgba(249, 215, 57, 1)"
                    v-show="Number(item.iscircle)===1 && Number(item.issign)!==1">
              好友
            </button>
          </div >
          <div class="li_header_right">
            <span v-show="Number(item.auditcount) > 0" style=" white-space: nowrap;margin-right: 5px">待审核</span>
            <van-badge v-show="Number(item.auditcount) > 0" :content="item.auditcount" max="99" />
            <img src="../../assets/更多灰@2x.png" alt="">
          </div>
        </li>
        <li class="li_bottom">
          <p>联系电话：{{item.phone}}</p>
<!--          <p>-->
<!--            <span class="color">初步诊断：{{item.DIAGNOSE}}</span>-->
<!--          </p>-->
          <p>联系地址：{{item.zuizhongAddress}}</p>
        </li>
      </ul>
      <van-empty
        style="width: 100%;height: 60%"
        v-show="peopleList.length <= 0 && isLoading === false"
        class="custom-image"
        :image="require('../../assets/空两本书.png')"
        description="暂无接受评定人员"
      />
      <van-loading size="24px" style="color: #1da4f2" vertical v-show="isLoading === true">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'SelectAssessor',
  data () {
    return {
      isShowperType: false,
      // 人员类型
      perType: '',
      options1: [
        {
          value: '',
          label: '全部人员类型'
        }, {
          value: '1',
          label: '我的好友'
        }, {
          value: '2',
          label: '签约人员'
        }
        // , {
        //   value: '3',
        //   label: '非好友/非签约'
        // }
      ],
      // 人员姓名
      perName: '',
      options2: [],
      // 手机号码
      perPhone: '',
      options3: [],
      // 身份证
      perIDcard: '',
      options4: [],
      // 地址
      perAddress: '',
      options5: [],
      isLoading: true, // 加载是否显示
      peopleList: [],
      page: 1,
      isScroll: true,
      menuIndex: 0,
      menuList: [
        {
          title: '选择人员',
          url: '/selectAssessor'
        },
        {
          title: '信息录入',
          url: '/enterPingGu'
        },
        {
          title: '选择类型',
          url: '/assessmentType'
        },
        {
          title: '选择量表',
          url: '/selectionAssessment'
        },
        {
          title: '量表填写',
          url: '/assessmentScale'
        }
      ],
      type: this.$route.query.type,
      team_id: this.$route.query.team_id
    }
  },
  mounted () {
    // $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
    this.getFindRoleJueSe()
    window.addEventListener('scroll', this.scrollBottom, true)
  },
  methods: {
    // 点击新增评定项目
    onClickRight () {
      if (this.assess_type === '' || this.assess_type === undefined || this.assess_type === null) {
        // 类别 （门诊、住院、居家）
        sessionStorage.removeItem('assess_type')
      }
      // 初步诊断
      sessionStorage.removeItem('diagnose')
      // 目前状况
      sessionStorage.removeItem('current_status')
      sessionStorage.removeItem('assess_user_name')
      sessionStorage.removeItem('isXiu')
      sessionStorage.removeItem('ACCEPT_USER_ID')
      this.$router.push({path: '/PingGuSelectPeople', query: {'type': this.type, team_id: this.team_id}})
    },
    // 滚动事件
    scrollBottom () {
      let scrollTop = this.$refs.box.scrollTop
      let clientHeight = this.$refs.box.clientHeight
      let scrollHeight = this.$refs.box.scrollHeight
      if (scrollHeight - scrollTop <= clientHeight + 300 && this.isScroll === true) {
        this.isScroll = false
        setTimeout(() => {
          this.page += 1
          this.isLoading = true
          // 移除滚动事件
          window.removeEventListener('scroll', this.scrollBottom, true)
          this.getFindRoleJueSe()
        }, 500)
      }
    },
    remoteMethodAddress (query) {
      this.getAddress(query)
    },
    // 住址获取焦点
    clickPerAddress () {
      this.getAddress('')
    },
    getAddress (name) {
      this.$http.getSelectPersonAddress({address: name, team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options5 = [{
            value: '',
            label: '不限地址'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.address,
                label: curr.zuizhongAddress
              }
              _this.options5.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    remoteMethodIDcard (query) {
      this.getIDcard(query)
    },
    // 身份证号获取焦点
    clickPerIDcard () {
      this.getIDcard('')
    },
    getIDcard (name) {
      this.$http.getSelectPersonIdnum({idnum: name, team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options4 = [{
            value: '',
            label: '不限身份证号'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.ID,
                label: curr.shenfenzhenghao
              }
              _this.options4.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    remoteMethodPhone (query) {
      this.getPhone(query)
    },
    // 手机号码获取焦点
    clickPerPhone () {
      this.getPhone('')
    },
    getPhone (name) {
      this.$http.getSelectPersonPhone({phone: name, team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options3 = [{
            value: '',
            label: '不限手机号码'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.PHONE,
                label: curr.phone
              }
              _this.options3.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 切换
    changePer () {
      this.page = 1
      this.getFindRoleJueSe()
    },
    remoteMethodName (query) {
      this.getName(query)
    },
    // 人员姓名获取焦点
    clickPerName () {
      this.getName('')
    },
    getName (name) {
      this.$http.getSelectPersonName({name: name, team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options2 = [{
            value: '',
            label: '不限人员姓名'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.NICK_NAME,
                label: curr.name
              }
              _this.options2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    clickRun (item) {
      var type = this.$utils.getUrlKey('type')
      window.sessionStorage['ACCEPT_USER_ID'] = item.USER_ID
      // sessionStorage.setItem('assess_type', '')
      this.$router.push({path: '/self', query: {'ACCEPT_USER_ID': item.USER_ID, 'type': type, 'assess_type': '', team_id: this.team_id}})
    },
    // 获取所有好友及个人信息
    getFindRoleJueSe () {
      this.$http.findRoleJueSe({
        typeperson: this.perType, // 人员类型 1:好友;2:签约;3:非好友非签约
        name: this.perName, // 姓名
        phone: this.perPhone, // 手机号
        idnum: this.perIDcard, // 身份证号
        address: this.perAddress, // 地址
        page: this.page,
        team_id: this.team_id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var _this = this
            if (res.data.data.length > 0) {
              window.addEventListener('scroll', this.scrollBottom, true)
              this.isScroll = true
            } else {
              window.removeEventListener('scroll', this.scrollBottom, true)
              this.isScroll = false
            }
            if (this.page === 1) {
              this.peopleList = []
              this.peopleList = res.data.data
            } else {
              res.data.data.forEach(function (current, index, arr) {
                _this.peopleList.push(current)
              })
            }
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击返回
    back () {
      // 返回上一页
      this.$router.go(-1)
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  }
}
</script>

<style scoped>
  ul, li {
    list-style: none;
  }
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    font-family: "PingFang SC";
    overflow: auto;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    z-index: 99;
    position: sticky;
    top: 0;
  }
  .div{
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .div:nth-child(1),
  .div:nth-child(3){
    width: 28%;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    width: 45%;
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .side{
    color: #1da4f2;
  }
  .tabList{
    height: 44px;
    width: 100%;
    background: #FFFFFF;
    /*background: #A5DBFA;*/
    display: flex;
    align-items: center;
    overflow-x: scroll;
    position: sticky;
  }
  .topSmall {
    top: 44px;
  }
  .topMore {
    top: 104px;
  }
  .tabList::-webkit-scrollbar{
    display: none;
  }
  .search{
    margin-left: 8px;
  }
  .content {
    overflow: scroll;
    padding: 10px;
    box-sizing: border-box;
  }
  .content ul{
    padding: 10px;
    box-sizing: border-box;
    background: #FFFFFF;
    margin-bottom: 5px;
    border-radius: 10px;
  }
  .content ul li{
    display: flex;
  }
  .peoTypeBtn{
    width: 30px;
    height: 20px;
    font-size: 11px;
    border-radius: 2px;
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
  }
  .photo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
  }
  .li_header{
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
  }
  .li_header .li_header_left{
    width: 85%;
    display: flex;
    align-items: center;
  }
  .li_header .li_header_right{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .li_header div:nth-child(2) img{
    width: 7px;
    height: 13px;
    margin-left: 10px;
  }
  .li_header div a{
    margin-left: 10px;
  }
  .li_bottom{
    flex-direction: column;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .li_bottom p{
    margin-bottom: 5px;
  }
  /deep/ .van-search__action{
    font-size: 15px;
    font-weight: bold;
    color: #1da4f2;
  }
  input{
    height:25px;
    border-radius: 15px;
    border: none;
    background: #FAF9FE;
    font-size: 13px;
  }
  input::placeholder{
    text-align: center;
  }
  .nameInput{
    width: 100px;
  }
  .phoneInput{
    width: 160px;
  }
  ::v-deep .el-select-dropdown,
  /deep/ .el-popper,
  /deep/ .el-scrollbar{
    width: 100vw;
    max-width: 100vw !important;
  }
 /deep/ .el-input--small .el-input__inner{
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
 }
  /deep/ .el-input--small .el-input__inner{
    color: #1DA4F2 !important;
    border-radius: 15px;
    background: rgba(29, 164, 242, 0.2) !important;
    border: 1px solid rgba(29, 164, 242, 0.2) !important;
  }
  /deep/ .is-focus .el-input__inner{
    background: rgba(29, 164, 242, 1) !important;
    border: 1px solid rgba(29, 164, 242, 1) !important;
    border-radius: 15px;
    color: white !important;
  }
  /deep/ .el-icon-arrow-up:before {
    content: "\E6E1";
    color: #1DA4F2 !important;
  }
  /deep/ .el-input__inner::placeholder{
    color:  #1DA4F2 !important;
  }
  /deep/  .is-focus .el-input__inner::placeholder{
    color:  #fff !important;
  }
  /deep/ .is-focus .el-icon-arrow-up:before {
    content: "\E6E1";
    color: #fff !important;
  }
  .menu{
    width: 100%;
    height: 60px;
    background: #1DA4F2;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
    position: sticky;
    top: 44px;
  }
  /*/ 选择框 开始样式/*/
  /deep/ .el-steps--horizontal{
    width: 105%;
  }
  /deep/ .el-step.is-center .el-step__description{
    padding: 0;
  }
  /deep/ .el-step__description{
    margin: 0;
    font-size: 13px;
  }
  /deep/ .el-step__icon{
    width: auto;
    height: auto;
  }
  /deep/ .el-step__icon.is-text{
    border: none;
  }
  /deep/ .is-finish,
  /deep/ .el-step__description.is-process{
    color: #fff;
  }
  /deep/ .el-step__description.is-finish{
    color: white !important;
  }
  /deep/ .el-step__description.is-wait{
    color: rgba(255, 255, 255, 0.7);
  }
  /deep/ .el-step__head.is-finish{
    border-color: #fff;
  }
  /deep/ .el-step__head.is-wait{
    border-color: transparent !important;
  }
  /deep/ .el-step__line{
    border-color: transparent !important;
  }
  /deep/ .el-step.is-horizontal .el-step__line{
    height: 1px;
    /*top:7px;*/
    top: 35%;
  }
  /deep/ .el-step__line{
    background: white;
  }
  /*/ 选择框 结束样式/*/
</style>
